{extend name="public/base"/} {block name="body"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/xsd/css/checkout.css" />
<style>
.mui-btn-block{
  padding: 5px;
  border: 1px solid #ccc !important;
  margin: 5px;
  -webkit-appearance: none;
}
</style>
<header class="mui-bar mui-bar-nav" style="z-index:7">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">添加地址</h1>
</header>
<div class="mui-content ">
  <h5 style="margin:10px 5px;">联系人</h5>
  <div class="formbloack username" >
      <div class="label-wrap" >姓名</div>
      <div class="input-group-wrap" >
          <div class="input-wrap" > <input type="text" style="margin-bottom: 0;    padding-left: 0;" placeholder="收货人姓名" name="name" value="{$info.name}" > </div>
          <div class="input-wrap bottom" > <span class="form-radio" > <span class="radio-icon  {neq name='info.sex' value='2'}checked{/neq}" data-sex="1" ></span> 先生 </span> <span class="form-radio" > <span class="radio-icon {eq name='info.sex' value='2'}checked{/eq}" data-sex="2" ></span> 女士 </span>
          </div>
      </div>
  </div>

  <div class="formbloack phone" >
      <div class="label-wrap" >手机</div>
      <div class="input-group-wrap rightbtn">
          <div class="input-wrap" style="    padding: .173333rem 0;"> <input placeholder="收货人的手机号" type="tel" name="tel" value="{$info.tel}" style="margin-bottom: 0;    padding-left: 0;"> </div>
      </div>
  </div>
  <h5 style="margin:10px 5px;">收货地址</h5>
  <div class="formbloack address" >
      <div class="input-group-wrap" >
        <div style="display: -webkit-box;">
            <div class="mui-input-row mui-radio mui-left">
                <label>市区</label>
                <input type="radio" name="type" {eq name="info.type" value="0"}checked{/eq}    {empty name="info.type"} checked{/empty} value="0">
            </div>
            <div class="mui-input-row mui-radio mui-left">
                <label>邮寄</label>
                <input type="radio" name="type" {eq name="info.type" value="1"}checked{/eq}  value="1">
            </div>
        </div>
          <div class="input-wrap top" id="sqdz"  {eq name="info.type" value="1"}style="display:none;"{/eq}>
              <select class="mui-btn mui-btn-block" name="first_area">
                {volist name=":config('delivery_area')" id="vo"}

                  {eq name='Think.cookie.shopindex' value="index/index/stindex"}
                    {eq name="key" value="1"}<option {eq name='info.first_area' value='$key'}selected{/eq}  value="{$key}">{$vo}</option>{/eq}
                  {else/}
                  <option {eq name='info.first_area' value='$key'}selected{/eq}  value="{$key}">{$vo}</option>
                  {/eq}
                {/volist}
              </select>
              <select class="mui-btn mui-btn-block" name="second_area">
              </select>
          </div>
          <input type="hidden" value="{$info.id}" name="id" />
          <div class="input-wrap " style="border-bottom: 1px solid #eee;margin-bottom:20px;"> <input type="text" style="margin-bottom: 0;    padding-left: 0;"  rows="2" name="address" value="{$info.address}" placeholder="详细地址 (如门牌号等)" > </div>
      </div>
  </div>
  <div class="form-button-wrap" > <button class="form-button" type="button" id="addAddress" >提 交</button> </div>
    <script id="tpl" type="text/html">
    {{each  as value}}
    <option value="{{value.id}}">{{value.second_area}}</option>
    {{/each}}
    </script>
</div>
{/block}
{block name="script"}

<script type="text/javascript">
  $(function(){
    $('[name="first_area"]').change(function(){
      var $this = $(this),id = $this.val();
      $('[name="second_area"]').html(' ');
      $.post("{:url('index/index/getSecondArea')}", {
          "id": id
      }, function(data) {

        var html = template('tpl', data);
        $('[name="second_area"]').html(html);

      }, "json");
    })
    $('[name="first_area"]').change();

    $('.form-radio').click(function(){
      $(this).find('.radio-icon').addClass('checked')
      $(this).siblings().find('.radio-icon').removeClass('checked')
    })


    $('#addAddress').click(function(){
         var name = $.trim($('[name="name"]').val()),
             sex = $(".form-radio").find('.checked').attr('data-sex'),
             tel = $.trim($('[name="tel"]').val()),
             type = $('[name="type"]:checked').val(),
             first_area = $('[name="first_area"]').val(),
             second_area = $('[name="second_area"]').val(),
             id = $('[name="id"]').val(),
             address= $.trim($('[name="address"]').val());
        if(!name){
          mui.toast('请输入收货人姓名')
          return;
        }
        if (!tel) {
             mui.toast("请输入号码！");
             return;
         } else if (!/^0?1[3|4|5|7|8]\d{9}$/.test(tel)) {
             mui.toast("你输入的手机号码不正确！");
             return;
         }
        if (!address) {
             mui.toast("请输入详细地址！");
             return;
         }

         $.post("{:url('index/address/add')}", {
             "id": id,
             "name": name,
             "sex": sex,
             "tel": tel,
             "type": type,
             "first_area": first_area,
             "second_area": second_area,
             "address": address
         }, function(data) {
             if(data.code == 1){
               setTimeout(function() {
                 mui.back();
               }, 1000);
             }
             mui.toast(data.msg)
         }, "json");
    })

    //地址类型
    $('[name="type"]').click(function(){
      var val = $(this).val();
      if(val != 1){
        $('#sqdz').show()
      }else{
        $('#sqdz').hide()
      }
    })
  })
</script>
{/block}
